<!-- 单据设置页面 - 表格相关组件 -->
<template>
  <div>
    <div class="content-box">
      <div class="left-box" :class="{ fullWidth: ticketMode ? false : true }">
        <div class="title-box">单据设置</div>
        <div class="table-list-box">
          <el-table v-loading="loading" element-loading-text="加载中..." :data="tableData" border @row-click="singleElection"  :height="601">
            <el-table-column label="" width="30">
              <template #default="scope">
                <el-radio class="radio" v-model="radioValue" :label="scope.row.id"></el-radio>
                <span> </span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" prop="id" label="ID" />
            <el-table-column align="center" width="200" prop="detail.name" label="单据名" />
            <el-table-column align="center" label="内容">
              <template #default="scope">
                <div class="check-list-box" v-if="!isEmpty(scope?.row?.detail)">
                  <div class="check-item" v-for="(item, index) in scope.row.checkedList" :key="index" @click.stop="onChangeChecked(item, scope.$index)">
                    <img class="image" v-if="getChecked(item)" src="@/assets/images/more/checked-icon.png" alt="" />
                    <img class="image" v-else src="@/assets/images/more/notcheck-icon.png" alt="" />
                    <div class="desc" v-if="getButtonText(item)">{{ getButtonText(item) }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="desc-btn-box">
          <div class="desc">共{{ tableData.length }}条</div>
          <div class="btn-box">
            <div class="btn-item" @click.stop="onOpenDialog">修改单据名</div>
            <button class="btn-item" :disabled="buttonLoading" @click.stop="handleTicketSettingUpdate">应用</button>
            <div class="btn-item" @click="handleBack">返回</div>
          </div>
        </div>
      </div>
    </div>
    <UpdateNameDialog  v-model:showDialog="isShowDialog" :keyword="receiptName" @onConfirm="onComfirmChange"  />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed, defineEmits  } from 'vue'
import { ElMessage } from 'element-plus'
import { ticketSettingDetail, ticketSettingUpdate } from '@/api/user'
import { isEmpty } from '@/utils/toolsValidate'
import UpdateNameDialog from './UpdateNameDialog.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchKeyword = ref(null)
const selectCheckedList = ref([])
const tableCheckedList = ref([])
const tableData = ref([])
const loading = ref(false)
const buttonCheckedEnum = reactive({ money: 'money', member_price: 'member_price', present_price: 'present_price', back_price: 'back_price', print_time: 'print_time', pay_time: 'pay_time', remake: 'remake', first_category: 'first_category', second_category: 'second_category', total_money: 'total_money', discount_list: 'discount_list', back_list: 'back_list', present_list: 'present_list', inventory_list: 'inventory_list', num: 'num' })
const buttonLoading = ref(false)
const isShowDialog = ref(false)
const radioValue = ref(null)

const ticketMode = ref(null)


onMounted(() => {
  getTicketSettingDetail()
})

function getChecked(item) {
  if (isEmpty(item)) return false
  if (buttonCheckedEnum[Object.keys(item).join('')]) {
    const key = buttonCheckedEnum[Object.keys(item).join('')]
    return item[key] === 1
  }
}

function getButtonText(item) {
  if (isEmpty(item)) return false
  const buttonTextEnum = { money: '单价', member_price: '会员价', present_price: '赠送金额', back_price: '退菜金额', print_time: '打印时间', pay_time: '结账时间', remake: '备注', first_category: '菜品一级分类', second_category: '菜品二级分类', total_money: '金额', discount_list: '优惠统计', back_list: '退菜明细', present_list: '赠送合集', inventory_list: '出品合计', num: '数量' }
  if (buttonTextEnum[Object.keys(item).join('')]) return buttonTextEnum[Object.keys(item).join('')]
}


// 表格选中行

const emits = defineEmits(['select-table-row']) // 选中回调定义
function singleElection(row) {
  radioValue.value = row.id
  ticketMode.value = row
  //选中回调
  emits('select-table-row', row)
}

function onChangeChecked(item, rowIndex) {
  const key = buttonCheckedEnum[Object.keys(item).join('')]
  item[key] = item[key] === 1 ? 0 : 1
  tableData.value[rowIndex].detail[key] = item[key]
}

function getTicketSettingDetail() {
  loading.value = true
  ticketSettingDetail({ key: 'ticket' }).then(res => {
    if (res.status === 200) {
      if (!isEmpty(res?.data?.values)) {
        const dataList = []
        for (const [key, value] of Object.entries(res.data.values)) {
          const list = []
          for (const key2 in value) {
            if (key2 !== 'name') list.push({ [key2]: value[key2] })
          }
          dataList.push({ id: key, detail: value, checkedList: list })
        }
        dataList.sort((a, b) => a.id - b.id)
        tableData.value = dataList
        loading.value = false
      }
    }
  }).finally(() => { loading.value = false })
}

function handleTicketSettingUpdate() {
  const dataObject = {}
  tableData.value.forEach(key => { dataObject[key.id] = key.detail })
  const datas = { key: 'ticket', form: { ...dataObject } }
  buttonLoading.value = true
  ticketSettingUpdate(datas).then(res => {
    buttonLoading.value = false
    if (res.status === 200) {
      ElMessage.success('操作成功')
      getTicketSettingDetail()
    }
  }).catch(() => { buttonLoading.value = false })
}

function handleBack() { 
  
  router.back() 
}

const receiptName = ref()
function onOpenDialog() {
  if (!radioValue.value) { ElMessage.warning('请先选中您要修改名称的单据'); return }
  const index = tableData.value.findIndex(v => v.id === radioValue.value)
  receiptName.value = tableData.value[index].detail.name
  isShowDialog.value = true
  console.log('打开》》',receiptName.value, isShowDialog.value)
}

function onComfirmChange(newName) {
  const index = tableData.value.findIndex(v => v.id === radioValue.value)
  tableData.value[index].detail.name = newName
  handleTicketSettingUpdate()
}
</script>

<style lang="scss" scoped>
.fullWidth { width: 1600px !important; transition: all 1s !important; }
::v-deep { .el-table { border-radius: 12px; } .el-table__body-wrapper { height: 730px; overflow-y: auto; } .el-table__body-wrapper::-webkit-scrollbar { width: 6px !important; height: 0 !important; } .el-table__body-wrapper::-webkit-scrollbar-thumb { height: 200px !important; background: #d2d2d2 !important; border-radius: 3px !important; } .el-table__body-wrapper::-webkit-scrollbar-track { display: none !important; } .el-table th.el-table__cell { background: #a85b62; color: #fff !important; } .el-input__inner { border-radius: 12px; } .el-radio__input.is-checked .el-radio__inner { border-color: #7c0a03; background: #7c0a03; } }
.content-box { display: flex; align-items: flex-start; }
.content-box .left-box { width: 1284px; height: 980px; background: #ffffff; border-radius: 20px; box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16); box-sizing: border-box; }
.content-box .left-box .title-box { display: flex; align-items: center; justify-content: center; height: 88px; background: #f4f4f4; border-radius: 20px 20px 0px 0px; font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: center; color: #333333; }
.content-box .left-box .table-list-box { padding: 20px 30px 0 30px; }
.content-box .left-box .table-list-box .check-list-box { display: flex; align-items: center; }
.content-box .left-box .table-list-box .check-list-box .check-item { display: flex; align-items: center; margin-right: 100px; cursor: pointer; }
.content-box .left-box .table-list-box .check-list-box .check-item .image { flex-shrink: 0; width: 20px; height: 20px; margin-right: 12px; }
.content-box .left-box .table-list-box .check-item:first-child { margin-left: 70px; }
.content-box .left-box .table-list-box .check-item:last-child { margin-right: 0; }
.content-box .left-box .desc-btn-box { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-left: 40px; }
.content-box .left-box .desc-btn-box .desc { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; }
.content-box .left-box .desc-btn-box .btn-box { display: flex; align-items: center; }
.content-box .left-box .desc-btn-box .btn-box .btn-item { display: inline-block; padding: 0 42px; height: 52px; line-height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; margin-right: 40px; cursor: pointer; }
.content-box .left-box .desc-btn-box .btn-box .btn-item:hover { color: #7c0a03; border-color: #7c0a03; }
</style>
